<template>
	<view>
		<view class="page-title text-center">{{info.governanceLevel}}</view>
		<view class="governance-box " :style="{backgroundColor:`${info.color}`,color:'white'}">
			<view class="name">{{info.name}}</view>
			<view class="text mt-20">{{info.code}}</view>
			<view class="mt-20" style="height: 1px;background-color: rgba(255,255,255,0.3);"></view>
			<view class="cell mt-20" v-if="info.leader">
				<view class="text">管理人员</view>
				<view class="text">{{info.leader.name}}</view>
			</view>
			<view class="cell mt-20">
				<view class="text">管辖范围</view>
				<view class="text" v-if="info.leader">{{info.subGovernanceCount}}个下级区域</view>
			</view>
		</view>
		<!-- <view class="list mt-30">
			<u-cell-group title="下级管理" :border="false">
				<u-cell-group customClass="list-item" v-for="item in list" @click="navTo('/pages/town/governance?id='+item.id)" :border="false">
					<u-cell title="名称" :value="item.name"></u-cell>
					<u-cell title="编号" :value="item.code"></u-cell>
					<u-cell v-if="item.leader" title="管理人员" :value="item.leader.name"></u-cell>
					<u-cell title="覆盖人口" :value="`${item.subGovernanceCount}人`" :border="false"></u-cell>
				</u-cell-group>
			</u-cell-group>
			</view> -->
		<view class="page-description mt-20">{{info.careFocus}}</view>
		<view class="sub-list">
			<view class="sub-item" v-for="item in list" @click="navTo('/pages/town/governance?id='+item.id)">
				<view class="li">
					<view class="label">名称</view>
					<view class="value">{{item.name}}</view>
				</view>
				<view class="li">
					<view class="label">编号</view>
					<view class="value">{{item.code}}</view>
				</view>
				<view class="li" v-if="item.leader">
					<view class="label">管理人员</view>
					<view class="value">{{item.leader.name}}</view>
				</view>
				<view class="li">
					<view class="label">覆盖人口</view>
					<view class="value">{{item.subGovernanceCount}}个下级区域</view>
				</view>
			</view>
		</view>
		<view class="p-30">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>
<script>
	import {
		getGovernance,
		getGovernanceList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				info: {},
				loading: false,
				page: 1,
				size: 10,
				status: 'loadmore',
				list: [],
				options: {},
			}
		},
		onLoad(options) {
			this.options = options;
			this.getPageData(() => {
				this.getList(true);
			})

		},
		onPullDownRefresh() {
			this.page = 1;
			this.status = 'loadmore';
			this.getList(true);
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			getPageData(cb) {
				getGovernance(this.options?.id).then(res => {
					this.info = res;
					//governanceLevel
					typeof cb === 'function' && cb();
				})
			},
			async getList(isRefresh = false) {
				if (this.status === 'loading' || this.status === 'nomore') {
					return;
				}
				this.status = 'loading';
				const res = await getGovernanceList(this.info.id, {
					params: {
						...{
							page: this.page,
							size: this.size
						},
						...this.search
					}
				});
				const list = res._embedded?.items || [];
				if (isRefresh) {
					this.list = list;
				} else {
					this.list = this.list.concat(list);
				}
				this.status = res.page.totalElements <= ((res.page.number - 1) * res.page.size + list.length) ?
					'nomore' : 'loadmore';
				this.page = this.page + 1;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	
	.page-title {
		padding: 20rpx 30rpx;
		font-size: 17px;
		font-weight: bold;
	}
	.page-description{
		padding: 20rpx 30rpx;
		font-size: 14px;
		color:#999999;
	}
	.governance-box {
		padding: 20px;
		border-radius: 15px;
		width: calc(100% - 60rpx);
		margin: 0 auto;

		.name {
			font-size: 17px;
			font-weight: bold;
		}

		.text {
			font-size: 12px;
		}

		.cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			border-radius: 5px;
			//padding: 10rpx 20rpx;
			//background-color: rgba(255,255,255,0.5);
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			padding: 20rpx 0;
		}
	}

	.list-item {
		border-radius: 15px;
		width: calc(100% - 60rpx);
		margin: 30rpx;
		background-color: white;
	}

	.sub-item {
		border-radius: 15px;
		width: calc(100% - 60rpx);
		margin: 30rpx;
		background-color: white;

		.li {
			padding: 10px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #eee;
			&:last-child{
				border-bottom: none;
			}
			.label {
				font-size: 14px;
				color: #333;
				flex-shrink: 0;
			}

			.value {
				font-size: 13px;
				color: #999;
				flex-grow: 1;
				text-align: right;
			}
		}
	}
</style>